import styles from "./Login.module.css";
import type { FormProps } from "antd";
import { Button, Checkbox, Flex, Form, Input } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { NavLink } from "react-router";

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = values => {
  console.log("Success:", values);
};
export default function LoginPage() {
  console.log("LoginPage");

  return (
    <div className={styles.loginWrapper}>
      <Form
        name="login"
        initialValues={{ remember: true }}
        style={{
          width: 400,
          height: 400,
          padding: 20,
          borderRadius: 20,
          backgroundColor: "white",
          marginTop: "15%",
          marginRight: "10%"
        }}
        onFinish={onFinish}
      >
        <Form.Item style={{ textAlign: "center", fontWeight: "bold" }}>
          <span>后台管理系统</span>
        </Form.Item>
        <Form.Item
          label="用户名"
          labelCol={{ span: 4 }}
          name="username"
          rules={[
            {
              required: true,
              message: "Please input your Username!"
            }
          ]}
        >
          <Input
            prefix={<UserOutlined />}
            placeholder="Username"
            autoComplete="off"
          />
        </Form.Item>
        <Form.Item
          label="密码"
          labelCol={{ span: 4 }}
          name="password"
          rules={[
            {
              required: true,
              message: "Please input your Password!"
            }
          ]}
        >
          <Input
            prefix={<LockOutlined />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item>
          <Flex justify="space-between" align="center">
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
            <NavLink to={"/forget-password"}>忘记密码</NavLink>
          </Flex>
        </Form.Item>

        <Form.Item style={{ marginTop: 60 }}>
          <Button block type="primary" htmlType="submit">
            登录
          </Button>
          <span className={styles.span}>或</span>
          <NavLink to="/register">注册</NavLink>
        </Form.Item>
      </Form>
    </div>
  );
}
